<template>
  <div>
    <h1>虚拟列表-vueuse</h1>
    <h3>正常列表一开始渲染会卡一下，虚拟列表不会</h3>
    <h3 class="zhong">
      优点:
      它通过只渲染可视区域内的元素，而不是一次性渲染所有数据，从而减少DOM节点的数量和内存消耗。这样可以显著提升页面的渲染速度和用户体验。
    </h3>
    <h3>
      备注：滚动条一开始就很高的原因可能是因为虚拟列表的总高度被设置为了所有数据项的总高度，而不仅仅是可视区域内的数据项。这是虚拟列表的正常行为，因为它需要计算出整个列表的总高度，以便正确地显示滚动条。
    </h3>
    <div v-bind="containerProps" class="box">
      <ul v-bind="wrapperProps">
        <li v-for="item in list" :key="item.data.id">
          {{ item.data.name }}
          <img class="image" :src="item.data.avatar" mode="scaleToFill" />
        </li>
      </ul>
    </div>
    <!-- <h1>正常列表</h1>
    <div class="box">
      <ul>
        <li v-for="item in allData" :key="item.id">
          {{ item.name }}
          <img class="image" :src="item.avatar" mode="scaleToFill" />
        </li>
      </ul>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useVirtualList } from '@vueuse/core'

type Item = {
  id: number
  name: string
  avatar: string
}

const itemHeight = ref(60) // 每一条(项)的高度，位置和虚拟列表距离调整不好底部会有白
const allData = ref<Item[]>([])
for (let i = 0; i < 12000; i++) {
  allData.value.push({
    id: i,
    name: `Name ${i + 1}`,
    avatar:
      'https://picnew9.photophoto.cn/20150402/fengjingbizhitupian-11497348_1.jpg'
  })
}

const { list, containerProps, wrapperProps } = useVirtualList(allData, {
  itemHeight: itemHeight.value,
  overscan: 5 // 预加载的项数，防止滚动时出现空白
})
</script>

<style lang="scss" scoped>
.box {
  width: 600px;
  height: 300px;
  background-color: pink;
}
.image {
  width: 60px;
  height: 60px;
}
.zhong {
  background-color: pink;
}
</style>
